<template>
    <div class="cent_back">
        <solid-window class="window"  :msg="popwarn" ref="child"></solid-window>
        <div class="account_back" id="account_back">
            <div class="msg-error" id="msg_error">
                <b></b>{{this.warnMsg}}
            </div>
            <div>
                <label class="name_lable"></label>
                <input type="text" @blur="bluron(1)" @click="change(1)" v-model="user.name" placeholder="邮箱/账号名">
            </div>
            <div>
                <label class="name_lable"></label>
                <input type="password" @blur="bluron(2)" @click="change(2)" v-model="user.password" placeholder="密码">
            </div>
            <a class="name_pwd" href="/#">{{this.forgetpwd}}</a>
            <div class="alienbox">
                <button class="alien" id="alien"  @click="userlogin()" >{{this.login}}</button>
            </div>
        </div>
    </div>
</template>

<script>
import SolidWindow from "@/components/sub/SolidWindow.vue";
export default {
    name: "accountLogin",
    components: {
        SolidWindow
    },
    props: {
    },
    data() {
        return {
            user:{
                mail:'',
                name:'',
                password:''
            },
            warnMsg: '',
            warnshow:'hidden',
            forgetpwd:'忘记密码',
            login:'登录',
            flage:'true',
            popwarn:''
        };
    },
    created() {

    },
    mounted() {
    },
    methods: {
        warnwindow(msg,warn){
            document.getElementById(msg).disabled=true;
            this.popwarn=warn;
            this.$refs.child.Scribblewindow();
            document.getElementById(msg).disabled=false;
        },

        bluron(newValue){
            if(this.flage){
                return;
            }else {
                // 输入框变红
                const divsub=document.getElementById('account_back').getElementsByTagName('div');
                divsub[newValue].style.border='1px solid #ef1c1c';
            }
        },
        // 在颜色进行变换，点击后红色边框由红色变为，正常颜色。
        change(newValue) {
            if(this.flage){
                return;
            }else {
                // 输入框变红
                const divsub=document.getElementById('account_back').getElementsByTagName('div');
                for(var i=1;i<3;i++){
                    divsub[i].style.border='1px solid #ef1c1c';
                }
                const divsub2=document.getElementById('account_back').getElementsByTagName('label');
                for (var j=0;j<divsub2.length;j++){
                    divsub2[j].style.backgroundColor='#e4393c;';
                }
                divsub[newValue].style.border='1px solid #bdbdbd';
            }

        },
        isnull(){

            if(this.user.name==''&&this.user.password==''){
                this.warnMsg='请输入账户名和密码';
                return false;
            }else if (this.user.name==''){
                this.warnMsg='请输入账户名';
                return false;
            }else if (this.user.password==''){
                this.warnMsg='请输入密码';
                return false;
            }else {
                return true;
            }
        },

// 登录的功能实现
        async userlogin() {
            this.flage=false;
            // 显示的警告
            const warn=document.getElementById('msg_error');
            // 输入框变红
            const divsub=document.getElementById('account_back').getElementsByTagName('div');

            if(this.isnull()){
                warn.style.visibility='hidden';
            }else {
                warn.style.visibility='visible';
                // 边框变红
                for(var i=1;i<3;i++){
                    divsub[i].style.border='1px solid #ef1c1c';
                }
                return;
            }
            var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;

            if (reg.test(this.user.name)){
                this.user.mail=this.user.name;
                this.user.name='';
            }
        //请求后端
            let res = await this.$http.post("loginaccount", this.user);
            //这里data存放的是后端返回的用户名，这里可以根据需要返回指定数据
            //  this.$store.commit("login", res.data.token);

            if(res.code==200){
                // 成功的话讲获取到额验证码保存到execode中去
                // this.$store.commit("login", res.data.token);
                // this.$router.push('/');
                // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                this.$router.push('/enrollview');


            }else if (res.code!=403) {
                // console.log("邮箱验证码获取失败");
                // this.$router.push('/')
            }


        },

        logout() {
            localStorage.clear();
            window.location.reload();
        },
    },
    //监听外部参数实时更新子组件内部变量
    watch: {
        index(newValue) {
            if (newValue) {
                this.activeIndex = newValue;
                return;
            }
        },
        immediate: true,
    },
};
</script>

<style scoped>


.cent_back{
    /*距离上面的距离*/
    margin-top: 5px;
    margin-bottom: 15px;
    /*弹性布局*/
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
/*显示没有输入的提示信息*/
.account_back .msg-error{
    /*弹性盒子*/
    display: flex;
    justify-content: start;
    align-items: center;
    /*显示出来*/
    visibility: hidden;

    background: #ffebeb;
    color: #e4393c;
    border: 1px solid #faccc6;
    padding: 3px 10px 3px 10px;
    line-height: 15px;
    height: auto;
    margin-bottom: 5px;
}
.account_back .msg-error b{
    margin-right: 10px;
    display: block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    background: url("@/assets/pwd-icons-new.png") -104px -49px no-repeat;
}
.account_back{
    /**/
    width: 306px;
    height: auto;
}
.account_back div{
    overflow: hidden;
    border: 1px solid #bdbdbd;
    /*border-color: #ef1c1c;*/
    /*弹性布局*/
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 23px;
    border-radius: 8px 8px 8px 8px;


}
.account_back div:focus{
    border: 1px solid #bdbdbd;
}
/*账户图像*/
.account_back .name_lable{
    background-position: 0 0;
}
.account_back label{

    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border-right: 1px solid #bdbdbd;
    background: url("@/assets/pwd-icons-new.png") no-repeat;
}
/*账户的输入框*/
.account_back input{
    text-align: left;
    outline: none;
    border: 1px solid #bdbdbd;
    height: 18px;
    border: 0;
    padding: 10px 0 10px 10px;
    width: 260px;
    float: none;
    font-size: 14px;
    font-family: '\5b8b\4f53';

}
/*------------*/

/*忘记密码的模块*/

/*忘记密码*/

.account_back .name_pwd{
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    margin-left: 80%;
    font: 12px/150% Arial,Verdana,"\5b8b\4f53";
}

.account_back .name_pwd:hover{
    color: #E4393C;
    text-decoration: underline;
}
/*登录按钮的容器*/
.account_back .alienbox{
    border: 0px solid #bdbdbd;
    /*border-color: #ef1c1c;*/
    /*弹性布局*/
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 23px;
    outline: none;
}
/*登录的按钮*/
.account_back div .alien{
    display: block;
    width: 302px;
    height: 31px;
    border: 1px solid #e85356;
    background: #e4393c;
    line-height: 31px;
    color: #fff;
    font-size: 20px;
    font-family: 'Microsoft YaHei';
    letter-spacing: 5px;
    text-decoration: none;
}
</style>